import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import Msg from 'mixin/msg'

const pageName = 'experienceMsg';

@inject('appStore', 'languageStore')
@observer
class ModuleName extends Msg {
	constructor(props) {
    super(props);
		this.searchOption = {
			experienceId: this.props.params.id
		}
		this.msgApi = '/experience/get';
  }

  render() {
    const pageData = this.props.languageStore.getPageData(pageName);
    const { coverImg, content, title, creator, readCount, createTime, listImg } = this.state.msgData;
    const { imgBaseUrl } = this.props.appStore;
    return (
    	<div className={pageName}>
        <Top
          title={pageData.title}
        />
        <div className={`${pageName}-Content`}>
          <div className="msg-temp">
            <div className="b-s">
              <h3>{ title }</h3>
              <div className="desc">
                <img src={`${imgBaseUrl}${listImg}`} alt=""/>作者{creator}
                <span className="fr"><i className="iconfont icon-eye"></i>{readCount} <span><i className="iconfont icon-time"></i>{createTime}</span></span>
              </div>
            </div>
            <img src={`${imgBaseUrl}${coverImg}`} alt="" className="coverImg" />
            <div className="con" dangerouslySetInnerHTML={{__html: content}}></div>
          </div>
        </div>
    	</div>
    )
  }
}

module.exports = ModuleName
